<template>
  <div>
    <Card>
      <tables ref="tables" v-model="tableData" :columns="columns" @on-delete="handleDelete" />
      <Page  :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
            show-total show-sizer show-elevator/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>

    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getOperationLog } from '@/api/data'
import CryptoJS from '@/libs/jiami'
import expandRow from './user-expand.vue'

export default {
  name: 'role',
  components: {
    Tables,
    expandRow
  },
  data () {
    return {

      columns: [

        { title: 'userId', key: 'userId', editable: true },
        { title: 'logName', key: 'logName', editable: true },
        { title: 'api', key: 'api', editable: true },
        { title: 'method', key: 'method', editable: true },
        { title: 'message', key: 'message', editable: true },
        { title: 'succeed', key: 'succeed', editable: true },
        { title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div',
              CryptoJS.formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm')
            )
          } }
      ],
      tableData: [],
      // 分页
      pageSize: 30, // 每页显示多少条
      dataCount: 0, // 总条数
      pageCurrent: 1// 当前页

    }
  },
  methods: {
    handleDelete (params) {
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    // 点击，切换页面
    changepage (index) {
      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      this.pageCurrent = index
      console.log('当前页：' + index)
      console.log('进入换页函数')
      getOperationLog(this.pageCurrent, this.pageSize).then(res => {
        this.tableData = res.data.data.data.list
        this.dataCount = res.data.data.data.total
        console.log('-====================-')
      })
    },
    // 每页显示的数据条数
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
    }
  },
  mounted () {
    // 需要分页
    let currentPage = this.pageCurrent
    let pageSize = this.pageSize

    getOperationLog(currentPage, pageSize).then(res => {
      this.tableData = res.data.data.data.list
      this.dataCount = res.data.data.data.total
      console.log('用户分页信息装载完毕')
      // 异步处理集合
      console.log('---执行循环异步开始---')
      console.log('---执行循环异步完毕---')
      console.log(this.tableData)
    })
  }
}
</script>

<style>

</style>
